<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ case.name }} - 用例详情</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container mt-4">
    <!-- 面包屑导航 -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'case_list' %}">用例列表</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ case.name }}</li>
        </ol>
    </nav>

    <!-- 用例基础信息卡片 -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="card-title mb-0">用例基础信息</h5>
        </div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-bold">用例名称</label>
                    <p class="form-control-plaintext">{{ case.name }}</p>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">测试类型</label>
                    <p class="form-control-plaintext">
                        {% if case.case_type == 'web' %}Web端{% endif %}
                        {% if case.case_type == 'mobile' %}移动端{% endif %}
                        {% if case.case_type == 'desktop' %}桌面端{% endif %}
                    </p>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">所属模块</label>
                    <p class="form-control-plaintext">{{ case.module }}</p>
                </div>
                <div class="col-md-2">
                    <label class="form-label fw-bold">用例状态</label>
                    <p class="form-control-plaintext">
                        {% if case.status == 'active' %}
                            <span class="badge bg-success">启用</span>
                        {% elif case.status == 'draft' %}
                            <span class="badge bg-warning">草稿</span>
                        {% else %}
                            <span class="badge bg-danger">禁用</span>
                        {% endif %}
                    </p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">执行者</label>
                    <p class="form-control-plaintext">{{ case.executor|default:"未执行" }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">执行时间</label>
                    <p class="form-control-plaintext">{{ case.run_time|date:"Y-m-d H:i"|default:"未执行" }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">创建时间</label>
                    <p class="form-control-plaintext">{{ case.created_at|date:"Y-m-d H:i" }}</p>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-bold">最近更新</label>
                    <p class="form-control-plaintext">{{ case.updated_at|date:"Y-m-d H:i" }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 用例详细内容卡片 -->
    <div class="row g-4 mb-4">
        <!-- 前置条件 -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0 fw-bold">前置条件</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted">{{ case.precondition|default:"无前置条件" }}</p>
                </div>
            </div>
        </div>
        <!-- 预期结果 -->
        <div class="col-md-6">
            <div class="card h-100">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0 fw-bold">预期结果</h6>
                </div>
                <div class="card-body">
                    <p class="text-success">{{ case.expected_result }}</p>
                </div>
            </div>
        </div>
        <!-- 测试步骤 -->
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0 fw-bold">测试步骤</h6>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        {% for step in case.steps.splitlines %}
                            {% if step.strip %}
                                <li class="list-group-item">{{ forloop.counter }}. {{ step.strip }}</li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        <!-- 实际结果（可选，执行后显示） -->
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-light">
                    <h6 class="card-title mb-0 fw-bold">实际结果</h6>
                </div>
                <div class="card-body">
                    <p class="{{ 'text-danger' if case.actual_result and case.actual_result != case.expected_result else 'text-muted' }}">
                        {{ case.actual_result|default:"未执行，暂无实际结果" }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- 返回按钮 -->
    <div class="text-center mb-4">
        <a href="{% url 'case_list' %}" class="btn btn-secondary">返回用例列表</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>